<script setup>
import { reactive,ref } from "vue";
import { GetSetPassapi } from "../http/api";
import { useRouter } from "vue-router";
const {push}=useRouter()
// import {  } from "";
const UserInfo=reactive({
    mobile:localStorage.getItem('real_name'),
    sms_code:localStorage.getItem('sms_code'),
    user_pass:''
})
const passT=ref('')
const SubLoginPass=()=>{
    if (passT.value!==UserInfo.user_pass) {
        alert('两次密码不一致')
        return
    }
    GetSetPassapi(UserInfo).then((res)=>{
            console.log('设置密码返回',res);
            if (res.data.code==200) {
                push('/home')
            }else{
                alert('修改错误')
                return
            }
    })
}
const PassChange=(e)=>{
    passT.value=e
}
const PassChangeT=(e)=>{
    UserInfo.user_pass=e
}
</script>
<template>
    <div>
        <div class="head_back">
            <van-icon name="arrow-left" size="30"/>
            <div>设置密码</div>
            <div></div>
        </div>
        <div class="_head_title">
            <login-input :placeholder="'请输入登录密码'" @INputChange="PassChange" class="input_title">
               <template v-slot:icon>
                <div>
                    输入密码
                </div>
               </template>
            </login-input>
            <login-input :placeholder="'请再次输入密码'" @INputChange="PassChangeT">
               <template v-slot:icon>
                <div>
                    再次输入
                </div>
               </template>
            </login-input>
        </div>
        <div class="_footer_sub">
            <button @click="SubLoginPass">提交</button>
        </div>
    </div>
</template>
<style scoped>

.head_back{
    width: 100%;
    height: 80px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 10px solid #f8f8f8;
}
._head_title{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  
}
button{
    width: 85%;
    height: 80px;
    background-color:#f15a24;
    color: white;
    margin: auto;
    border: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
}
._footer_sub{
    width: 100%;
    height: 100px;
    position: relative;
}
</style>